<template>
    <div id="user">
        <Header></Header>
        <div class="content">
        <el-aside style="float: left">
            <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose">
                <el-menu-item index="1" @click="checkIndex(1)">
                    <i class="el-icon-menu"></i>
                    <span slot="title">活动预约</span>
                </el-menu-item>
                <el-menu-item index="1" @click="checkIndex(2)">
                    <i class="el-icon-menu"></i>
                    <span slot="title">退出登录</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-main>
                <div class="main" v-show="showDefault">
                    <el-row>
                        <el-col :span="4" v-for="(o, index) in applys" :key="index" :offset="index > 0 ? 1 : 0">
                            <el-card :body-style="{ padding: '0px' }">
                                <img :src="o.status" class="image">
                                <div style="padding: 14px;">
                                    <span>{{o.message}}</span>
                                    <div class="bottom clearfix">
                                        <time class="time">{{ o.time }}</time>
                                        <el-button type="text" class="button" @click="close(o.id)">取消报名</el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
        </el-main>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
    import Header from "../components/Header";
    import Footer from "../components/Footer";
    import {queryMessage,deleteMessgeApi} from "../api";
    import {parseTime,formatTime} from "../utils/dateUtil";

    export default {
        name: "Apply.vue",
        components:{
            Header,Footer
        },
        data(){
            return{
                showDefault:true,
                input2:'',
                currentDate: new Date(),
                applys:''
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            checkIndex(index){
                if(index === 1){
                    this.showDefault = true
                }else {
                    this.$store.commit("REMOVE_INFO");
                    this.$message({
                        message: '注销成功',
                        type: 'success',
                        duration:500
                    });
                    this.$router.push({
                        name:'Index'
                    })
                }
            },
            getApply(){
                let user = JSON.parse(this.$store.getters.getUser)
                const _this = this
                queryMessage({
                    userId:user.id
                }).then(res => {
                    _this.applys = res.data
                    console.log(res)
                    for(let i = 0;i < _this.applys.length;i++){
                        _this.applys.insertTime = formatTime(_this.applys.insertTime)
                        console.log(formatTime(_this.applys.insertTime))
                    }
                })
            },
            close(id){
                const _this = this
                deleteMessgeApi({id}).then(res => {
                    this.$message({
                        message: '删除成功',
                        type: 'success',
                        duration:500
                    });
                    _this.getApply()
                })
            }
        },
        mounted() {
            this.getApply()
        }
    }
</script>
<style>
    .el-menu-vertical-demo.el-menu{

    }
    .el-aside{
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }
    .el-input.el-input--prefix{
        width: 10vw;
    }
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>
<style scoped>
    #user{
        position: relative;
    }
    .main{
        margin: 0 auto;
        width: 60vw;
        min-height: 50vh;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    }
</style>
